Vue3 配置路由拦截

一、概述

我们的网页需要用户登录后才可以进行显示，不然将其拦截到登录页面。

登录成功后，前端的 header 加上 token 值。如果 token 值为空，说明未登录。

二、设置路由守卫

import {createRouter, createWebHistory} from 'vue-router'
import routes from './routes'    // 导入 router 目录下的 router.js 配置路径和组件的
import { ElMessage } from "element-plus";

const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
	routes
})

/**
 * 全局前置路由守卫
 */
router.beforeEach((to, from, next) => {
    if (to.path == '/user/login' || to.path == '/user/register') {
        // 登录或者注册才可以往下进行
        next();
    } else {
        // 获取 token
        const token = localStorage.getItem('Authorization'); 
        // token 不存在
        if (token === null || token === '') {
			      ElMessage.error('您还没有登录，请先登录');
            next('/user/login');
        } else {
            next();
        }
    }
});

export default router;